<template>
  <div class="goods-detail">
    <img :src="data.image" class="cover"/>
    <div class="property">
      <h3 class="title">{{ data.title }}{{ data.code }}</h3>
      <p class="desc">{{ data.description }}</p>
      <div class="row">
        <label>官网价格：</label>
        <div class="info">
          <span class="current-price">{{ data.currentPrice }}</span>
          <span class="initial-price">{{ data.initialPrice }}</span>
        </div>
      </div>
      <div class="row">
        <label>享有折扣:</label>
        <div class="info">
          <img src="../../assets/front/goods/discount.png">
          <span class="discount">{{ data.ruleName != null ? data.ruleName : '无' }}</span>
        </div>
      </div>
      <div class="row">
        <label>适用人群:</label>
        <div class="info">{{ data.type }}</div>
      </div>
      <div class="row">
        <label>购买数量：</label>
        <div class="info">
          <el-input-number v-model="dataForm.number" size="small" :min="1" :max="10" @change="handleChange"/>
        </div>
      </div>
      <div class="row">
        <label>服务承诺:</label>
        <div class="info">
          <img src="../../assets/front/goods/property-icon-1.png"
               class="property-icon"/>
          <span class="service-tag">专业品质</span>
          <img src="../../assets/front/goods/property-icon-2.png"
               class="property-icon"/>
          <span class="service-tag">官方营销</span>
          <img src="../../assets/front/goods/property-icon-3.png"
               class="property-icon"/>
          <span class="service-tag">随时改</span>
          <img src="../../assets/front/goods/property-icon-4.png"
               class="property-icon"/>
          <span class="service-tag">随时退</span>
        </div>
      </div>
      <div class="operate">
        <div class="consult-btn" @click="consultHandle">
          <img src="../../assets/front/goods/consult.png"
               class="consult-icon">
          <span>咨询客服</span>
        </div>
        <div class="buy-btn" @click="createPayment">立即付款</div>
      </div>
    </div>

  </div>
  <el-divider/>
  <div class="goods-content">
    <el-descriptions title="商品摘要信息" :column="3" size="large" border>
      <el-descriptions-item label="体检名称" label-align="center">
        {{ data.title }} {{ data.code }}
      </el-descriptions-item>
      <el-descriptions-item label="体检类型" label-align="center">
        {{ data.type }}
      </el-descriptions-item>
      <el-descriptions-item label="试用人群" label-align="center">
        <span class="tag" v-for="one in data.tag">{{ one }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="体检机构" label-align="center">
        北京市神州大健康体检中心（东直门外大街234号）
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="体检项目">
        {{ data.checkupCount }}
      </el-descriptions-item>
      <el-descriptions-item label="有效期" label-align="center">
        一年
      </el-descriptions-item>
    </el-descriptions>
    <div class="detail">
      <fieldset>
        <legend>体检项目明细</legend>
        <div v-if="data.count_1>0">
          <h4 class="detail-title">科室检查({{ data.count_1 }}科目)</h4>
          <table class="detail-table">
            <tr v-for="one in data.checkup_1">
              <th>{{ one.title }}</th>
              <th>{{ one.content }}</th>
            </tr>
          </table>
        </div>
        <div v-if="data.count_2>0">
          <h4 class="detail-title">实验室检查({{ data.count_2 }}科目)</h4>
          <table class="detail-table">
            <tr v-for="one in data.checkup_2">
              <th>{{ one.title }}</th>
              <th>{{ one.content }}</th>
            </tr>
          </table>
        </div>
        <div v-if="data.count_3>0">
          <h4 class="detail-title">医技检查({{ data.count_3 }}科目)</h4>
          <table class="detail-table">
            <tr v-for="one in data.checkup_3">
              <th>{{ one.title }}</th>
              <th>{{ one.content }}</th>
            </tr>
          </table>
        </div>
        <div v-if="data.count_4>0">
          <h4 class="detail-title">其他检查({{ data.count_4 }}科目)</h4>
          <table class="detail-table">
            <tr v-for="one in data.checkup_4">
              <th>{{ one.title }}</th>
              <th>{{ one.content }}</th>
            </tr>
          </table>
        </div>
      </fieldset>
    </div>
  </div>
  <div class="checkup-appointment">
    <fieldset>
      <legend>预约须知</legend>
      <el-descriptions title="" :column="1" size="large" class="descriptions">
        <el-descriptions-item label="预约时间" label-align="center"
                              style="width:300px">
          该医院支持提前预约，若要预约当天请在08:30前下单
        </el-descriptions-item>
        <el-descriptions-item label="营业时间" label-align="center"
                              style="width:300px">
          周一至周五08:80-10:30(到院时间为08:80-10:30)
        </el-descriptions-item>
        <el-descriptions-item label="体检地点" label-align="center"
                              style="width:300px">
          北京市东城区东直门外大街234号神州大健康体检中心
        </el-descriptions-item>
        <el-descriptions-item label="体检凭证" label-align="center"
                              style="width:300px">
          体检当天凭借预约成功短信，现场出示身份证即可体检
        </el-descriptions-item>
        <el-descriptions-item label="优惠信息" label-align="center"
                              style="width:300px">
          会员在线支付时含“立减”字样的套餐，付款时会自动抵扣掉对应的金额
        </el-descriptions-item>
        <el-descriptions-item label="订单退改" label-align="center"
                              style="width:300px">
          如客户预约成功后选择退款，需扣除套餐实付金额的18%作为服务费。最高扣款金额不超过
        </el-descriptions-item>
        <el-descriptions-item label="订单退改" label-align="center"
                              style="width:300px">
          当您预约套餐时，即表示接受检测的所有项目。如因自身原因放弃体检套餐中的检查项目，
        </el-descriptions-item>
        <el-descriptions-item label="注意事项" label-align="center"
                              style="width:300px">
          当您预约套餐时，即表示接受检测的所有项目。如因自身原因放弃体检套餐中的检查项目，
        </el-descriptions-item>
        <el-descriptions-item label="发票申请" label-align="center"
                              style="width:300px">
          在体检后到“我的订单”中申请，如需了解开票具体流程，可在提交订单后及时联系中
        </el-descriptions-item>
      </el-descriptions>
    </fieldset>
    <fieldset>
      <legend>线上预约优势</legend>
      <div class="content">
        <div class="advantage">
          <div class="card">
            <dic class="left"><span>提前确认到院可检</span></dic>
            <div class="right"><span>在体检后到“我的订单”中申请，如需了解开票具体流程，可在提交订单后及时联系中</span>
            </div>
          </div>
          <div class="card">
            <dic class="left"><span>省时方便无需排队</span></dic>
            <div class="right"><span>体检当天携带身份证到院打印体检单，即可开始体检，无需排队缴费</span>
            </div>
          </div>
          <div class="card">
            <dic class="left"><span>电话通知</span></dic>
            <div class="right"><span>预约成功后如需改变，可预约电话告知客服</span>
            </div>
          </div>
          <div class="card">
            <dic class="left"><span>享受优惠节省费用</span></dic>
            <div class="right"><span>线上体检套餐，享受团体体检优惠价格，大部分可享医院价的7-9折</span>
            </div>
          </div>
        </div>
        <div class="timeline">
          <ul>
            <li>
              <img src="../../assets/front/goods/timeline-icon-1.png" class="list-img">
              <div class="list-tag">
                <img src="../../assets/front/goods/timeline-icon-1.png"/>
                <span>1</span>
              </div>
              <div class="list-content">
                <h4>选购体检套餐</h4>
                <p>确定订单无误后，充成线上支付</p>
              </div>
            </li>
            <li>
              <img src="../../assets/front/goods/timeline-icon-2.png" class="list-img">
              <div class="list-tag">
                <img src="../../assets/front/goods/timeline-icon-2.png"/>
                <span>2</span>
              </div>
              <div class="list-content">
                <h4>完成预约体检</h4>
                <p>填写体检人信息及体检日期</p>
              </div>
            </li>
            <li>
              <img src="../../assets/front/goods/timeline-icon-3.png" class="list-img">
              <div class="list-tag">
                <img src="../../assets/front/goods/timeline-icon-3.png"/>
                <span>3</span>
              </div>
              <div class="list-content">
                <h4>到院检查</h4>
                <p>到院出示身份证，领取体险单</p>
              </div>
            </li>
            <li>
              <img src="../../assets/front/goods/timeline-icon-4.png" class="list-img">
              <div class="list-tag">
                <img src="../../assets/front/goods/timeline-icon-4.png"/>
                <span>4</span>
              </div>
              <div class="list-content">
                <h4>获取体检报告</h4>
                <p>根据医院情况，到前台登记自取或自费邮寄</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </fieldset>
    <fieldset>
      <legend>体检注意事项</legend>
      <div class="content">
        <ul class="look-list">
          <li class="item">
            <div class="left">体检前</div>
            <div class="right">
              <ul>
                <li>体检前一天请您清淡饮食,勿饮酒、勿劳累。体检当天请空腹</li>
                <li>本检前一天要注意休息，晚上8点后不再进食。避免剧烈运动和情绪激动</li>
                <li>例假期间不宣做妇科、尿液检查</li>
              </ul>
            </div>
          </li>
          <li class="item">
            <div class="left">体检中</div>
            <div class="right">
              <ul>
                <li>体检前一天请您清淡饮食,勿饮酒、勿劳累。体检当天请空腹</li>
                <li>本检前一天要注意休息，晚上8点后不再进食。避免剧烈运动和情绪激动</li>
                <li>例假期间不宣做妇科、尿液检查</li>
              </ul>
            </div>
          </li>
          <li class="item">
            <div class="left">体检后</div>
            <div class="right">
              <ul>
                <li>体检前一天请您清淡饮食,勿饮酒、勿劳累。体检当天请空腹</li>
                <li>本检前一天要注意休息，晚上8点后不再进食。避免剧烈运动和情绪激动</li>
                <li>例假期间不宣做妇科、尿液检查</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </fieldset>
  </div>
  <el-dialog
      title="购买体检套餐"
      :close-on-click-modal="false"
      v-model="dialog.visible"
      width="305px"
      center
  >
    <!-- 显示二维码 -->
    <img :src="dialog.qrCode" class="qrcode" v-if="dialog.result"/>

    <!-- 显示支付成功信息 -->
    <div v-if="dialog.result" class="pay-success">
      <el-result
          status="success"
          title="付款成功"
          sub-title="请根据提示进行操作"
      ></el-result>
    </div>

    <!-- 底部按钮 -->
    <div class="dialog-footer style">
      <el-button type="danger" size="medium" v-if="dialog.result" @click="closeHandle">
        取消支付
      </el-button>
      <el-button type="primary" size="medium" v-if="dialog.result" @click="successHandle">
        支付成功
      </el-button>
      <el-button type="primary" size="medium" v-if="!dialog.result" @click="closeHandle">
        关闭窗口
      </el-button>
    </div>
  </el-dialog>
</template>


<script setup lang="ts">
import {getCurrentInstance, reactive} from "vue";
import router from "../../router";
import {ElMessageBox} from "element-plus";

const {proxy} = getCurrentInstance();
const dataForm = reactive({
  number: 1
})
const dialog = reactive({
  visible: false,
  result: false,
  qrCode: null,
  outTradeNo: null
})
const data = reactive({
  code: 'null',
  title: 'null',
  description: 'null',
  image: 'null',
  initialPrice: null,
  currentPrice: null,
  ruleName: null,
  type: 'null',
  tag: [],
  checkup_1: [],
  checkup_2: [],
  checkup_3: [],
  checkup_4: [],
  checkupCount: null,
  count_1: null,
  count_2: null,
  count_3: null,
  count_4: null,
  checkCount: null
})
let id = router.currentRoute.value.params.id;
console.log(id)
window.scroll(0, 0);
proxy.$http('/front/goods/searchById', 'POST', {id, id}, true, function (resp) {
  let result = resp.result;
  if (result == null) {
    proxy.$message({
      message: '无法加载商品',
      type: 'waring',
      duration: 1200,
      onClose: () => {
        router.push({name: "FrontGoodsList"})
      }
    });
  } else {
    data.code = result.code;
    data.title = result.title;
    data.description = result.description;
    data.image = `${proxy.$minioUrl}/${result.image}`;
    data.initialPrice = result.initialPrice;
    data.currentPrice = result.currentPrice;
    data.ruleName = result.ruleName;
    data.type = result.type;
    data.tag = result.tag;
    data.checkup_1 = result.checkup_1;
    data.checkup_2 = result.checkup_2;
    data.checkup_3 = result.checkup_3;
    data.checkup_4 = result.checkup_4;
    data.count_1 = result.count_1;
    data.count_2 = result.count_2;
    data.count_3 = result.count_3;
    data.count_4 = result.count_4;
    data.checkupCount = result.count_1 + result.count_2 + result.count_3 + result.count_4;
  }
})

function createPayment() {
  dialog.outTradeNo = null;
  dialog.qrCode = null;
  dialog.result = false;
// 检查用户是否登录
  proxy.$http('/front/customer/checkLogin', 'GET', null, true, function (resp) {
    if (resp.result) {
      // 如果未登录，提示用户
      proxy.$message({
        message: "请先登录系统",
        type: 'warning',
        duration: 1200
      });
    } else {
      // 如果已登录，确认支付操作
      proxy.$confirm('确认支付?', '支付确认', {
        confirmButtonText: '支付',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确认支付，发送创建支付订单请求
        let json = {
          goodsId: id,
          number: dataForm.number
        };
        proxy.$http('/front/order/createPayment', 'POST', json, true, function (resp) {
          if (!resp.illegal) {
            // 如果响应中有非法请求的标志，弹出支付弹窗
            dialog.visible = true;
            let result = resp.result;
            dialog.outTradeNo = result.outTradeNo;
            dialog.qrCode = result.qrCodeBase64;

            let token = localStorage.getItem('token');
            proxy.$options.sockets.onmessage = function (resp) {
              let data = resp.data;
              let json = JSON.parse(data);
              if (json.result) {
                dialog.result = true;
                delete proxy.$options.sockets.onmessage;
              }
            };
            proxy.$socket.sendObj(
                {opt: 'ping', identity: 'customer', token: token}
            );
          } else {
            // 处理其他响应情况
            ElMessageBox.alert('订单创建失败，请稍后重试', '错误', {
              confirmButtonText: '确定',
              type: 'error'
            });
          }
        });
      }).catch(() => {
        // 用户点击取消按钮时的操作
        console.log('取消支付');
      });
    }
  });
}

function successHandle() {
  let json = {outTradeNo: dialog.outTradeNo};

  proxy.$http('/front/order/searchPaymentResult', 'POST', json, true, function (resp) {
    if (resp.result) {
      proxy.$message({
        message: '付款不成功',
        type: 'error',
        duration: 1200
      });
    } else {
      dialog.result = true;
      delete proxy.$options.sockets.onmessage;
    }
  });
}


</script>


<style scoped lang="less">
@import "./goods.less";
</style>
